<template>
  <div class="">
    <div class="nav">
      <p v-for="(item, index) in nav" :key="index">{{ item }}</p>
    </div>
    <div class="con">
      <ul v-for="i in 7" :key="i" @click="showMask(i)">
        <li v-for="(item, index) in list" :key="index" v-show="item.flag == i">
          <s v-if="item.status == true">{{ item.title }}</s>
          <span v-else>{{ item.title }} </span>
        </li>
      </ul>
    </div>

    <div class="mask" v-show="show">
      <div class="inner">
        <button @click="show = false">关闭</button>
        <h1>周{{ flag }}任务列表</h1>
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            v-show="item.flag == flag"
          >
            <span>{{ item.title }}</span>
            <span v-if="item.status == true">已完成</span>
            <button v-else @click="complate(index)">完成</button>
            <button @click="remove(index)">删除</button>
          </li>
        </ul>

        <footer>
          <input type="text" style="width:500px;height:100px" v-model="title" />
          <button style="height:100px" @click="add">提交</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      list: [
        { title: "任务1", status: false, flag: 1 },
        { title: "任务2", status: false, flag: 2 },
        { title: "任务3", status: false, flag: 3 },
        { title: "任务4", status: false, flag: 4 },
        { title: "任务5", status: false, flag: 5 },
        { title: "任务6", status: false, flag: 6 },
        { title: "任务7", status: false, flag: 7 },
        { title: "任务8", status: false, flag: 1 },
        { title: "任务9", status: false, flag: 2 },
      ],
      show: false,
      flag: -1,
      title: "",
    };
  },
  mounted() {},
  methods: {
    showMask(i) {
      this.flag = i;
      this.show = true;
    },
    add() {
      this.list.push({ title: this.title, status: false, flag: this.flag });
      this.title = "";
    },
    complate(i) {
      this.list[i].status = true;
    },
    remove(i) {
      this.list.splice(i, 1);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.nav {
  width: 1200px;
  display: flex;
  p {
    flex: 1;
    border: 1px solid #ccc;
    height: 30px;
    text-align: center;
    line-height: 30px;
    box-sizing: border-box;
    background: burlywood;
  }
}
.con {
  width: 1200px;
  display: flex;
  ul {
    flex: 1;
    height: 400px;
    border: 1px solid #ccc;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  .inner {
    width: 800px;
    height: 500px;
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    footer {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
